import React from 'react';
import { Dropdown, Menu, Button, Icon, Modal } from 'antd'
import { messages } from "share/common";
import menuRoute from "routes/menuRoute";
import bannerImg from "images/audit-banner.jpg"
import reportImg from "images/audit-report.jpg"
import 'styles/financial-management/finance-audit/audit.scss'
import { connect } from 'react-redux';
import AuditTipsButton from "./components/audit-tips";
import AuditTipsBottomFrame from "./components/audit-tips/bottom-frame";

class FinanceAuditMode extends React.Component {

  state = {
    dropDownList: []
  };

  buttonMap = {
    scan: messages('expense-14.key242')/*APP扫码审核*/,
    gun: messages('expense-14.key243')/*扫码枪审核*/
  };

  componentDidMount() {
    if (this.checkPageRole('EXPENSEAUDIT', 2)) {
      this.setState({
        dropDownList: ['scan', 'gun']
      })
    }
  }

  handleClickScan = () => {
    this.context.router.push(menuRoute.getRouteItem('scan-audit').url)
  };

  handleClickGun = () => {
    this.context.router.push(menuRoute.getRouteItem('scan-gun-audit').url)
  };

  handleMenuClick = nowKey => {
    switch(nowKey){
      case 'scan':
        this.handleClickScan();
        break;
      case 'gun':
        this.handleClickGun();
        break;
    }
  };

  renderFinanceReport = () => {
    const { main: { isConsoleEnv, isTcEnv, isWatsonsEnv } } = this.props;
    let onClick = () => {
      Modal.info({
        content: <img src={reportImg} style={{ width: 720, borderRadius: 4 }}/>,
        className: 'finance-report-modal',
        width: 720,
        maskClosable: true
      })
    };
    if (isConsoleEnv || isTcEnv || isWatsonsEnv) {
      return (
        <img src={bannerImg} style={{ height: 32, marginRight: 10, cursor: 'pointer' }} onClick={onClick}/>
      );
    } else {
      return null;
    }
  };

  render() {
    const { language } = this.props;
    const { dropDownList } = this.state;
    return (
      <div className='finance-audit-mode'>
        {dropDownList.map((key, index) => (
          <Button
            key={key}
            style={{ marginRight: index === 0 ? 10 : 0 }}
            onClick={() => this.handleMenuClick(key)}
          >
            {this.buttonMap[key]}
          </Button>
        ))}
        {language.code === 'zh_cn' &&  <AuditTipsButton from="auditList"/>}
      </div>
    )
  }
}

FinanceAuditMode.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    main: state.main,
    language: state.main.language
  }
}
export default connect(mapStateToProps)(FinanceAuditMode);
